<template>
	<view>
		<view class="card_box">
			<image class="icon_img" :src="courseDetails.acatarUrl"></image>
			<view class="true_name">{{courseDetails.trueName}}</view>
			<view class="freestyle">{{courseDetails.freestyle}}</view>
			<view class="freestyle course">相关课程：</view>
			<view class="freestyle course_menus" v-for="(item,index) in courseMenuList">
				{{index+1}}.{{item.courseName}}
			</view>
			<view class="more_courses">查看更多课程</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//教师详情
				courseDetails: [],
				//相关课程
				courseMenuList: [],
			}
		},
		onLoad() {
			this.courseDetails = JSON.parse(uni.getStorageSync('courseDetails'));
			var courseMenuList = JSON.parse(uni.getStorageSync('courseMenuList'));
			//最多只展示5门课程
			for (var i = 0; i < courseMenuList.length; i++) {
				if(i<5){
					this.courseMenuList.push(courseMenuList[i]);
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	image{
		display: block;
	}
	.card_box{
		width: 90%;
		height: 600px;
		margin: 7% auto;
		background-image: url(/static/images/index/business_card.jpeg);
		background-size: 100% 100%;
		border-radius: 3%;
		background-repeat: no-repeat;
		overflow: hidden;
	}
	.icon_img{
		width: 90px;
		height: 90px;
		margin: 20% auto;
		margin-bottom: 3%;
		border-radius: 50%;
	}
	.true_name{
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		color: rgba($color: #000000, $alpha: 0.7);
	}
	.freestyle{
		color: rgba($color: #000000, $alpha: 0.7);
		padding: 0 8%;
		padding-top: 7%;
		font-size: 17px;
		text-align: justify;
	}
	.course{
		padding-top: 6%;
		font-size: 19px;
	}
	.course_menus{
		padding-top: 3%;
		font-size: 17px;
	}
	.more_courses{
		width: 150px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 18px;
		border-radius: 25px;
		color: rgba($color: #000000, $alpha: 0.7);
		margin: 0 auto;
		margin-top: 8%;
		border: 1px solid rgba($color: #000000, $alpha: 0.7);
	}
</style>
